<template>
  <div class="page2">
    <div class="header">
      <div class="header-title">浙江省智慧数字征迁系统</div>
      <div class="nav">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="5">处理中心</el-menu-item>
          <el-menu-item index="2">工作中心</el-menu-item>
          <el-menu-item index="3">消息中心</el-menu-item>
          <el-menu-item index="4"
            ><a href="https://www.ele.me" target="_blank"
              >订单管理</a
            ></el-menu-item
          >
        </el-menu>
      </div>
      <div class="username">
        <div class="top-imag-avatar">
          <img :src="userInfo.images" />
        </div>
        <!--<span class="user-name">{{ userInfo.name }}</span> -->
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userInfo.name
            }}<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in downBtnInfo" :key="index"
              ><i :class="item.icon"></i>{{ item.title }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    
    <div class="main-container">
      <div class="title-content">
        <div class="title-item" v-for="item in projectInfo" :key="item.id">
          <!-- <span>{{item.icon}}</span> -->
          <div class="title-item-img">
            <img :src="item.icon" alt="图片加载失败" />
          </div>
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="chart-content">
        <div class="chart-part-1">
          <div class="xmsl-content">
            <temp :options="mybarOption"></temp>
          </div>
          <div class="zsmj-content">
            <echart-pie></echart-pie>
          </div>
          <div class="zcfg-content">
            <ul>
              <li>
                <span
                  ><img src="~@/assets/szzq_images/title_img_sign.png" alt=""
                /></span>
                <span>政策法规</span>
              </li>
              <li v-for="(item, index) in policyInfo" :key="index">
                <span>{{ index + 1 }}</span>
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="chart-part-2">
          <div class="zfje-content">
            <temp :options="myscatter"></temp>
          </div>
          <div class="azrk-content">
            <temp :options="myoption"></temp>
          </div>
          <div class="qypm-content">
            <ul>
              <li>
                <span
                  ><img src="~@/assets/szzq_images/title_img_sign.png" alt=""
                /></span>
                <span>签约排名</span>
              </li>
              <li
                v-for="(item, index) in rankInfo"
                :key="index"
                class="rankitem"
              >
                <span>{{ index + 1 }}</span>
                <span>{{ item.city }}</span>
                <div class="jdt">
                  <el-progress
                    :percentage="item.percentage"
                    :color="item.customColor"
                  ></el-progress>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartLine from "@/components/common/echart/echartLine.vue";
import EchartPie from "@/components/common/echart/echartPie.vue";
import Temp from "../../components/common/echart/Temp.vue";
export default {
  components: {
    echartLine,
    EchartPie,
    Temp,
  },
  data() {
    return {
      activeIndex: "1",
      userInfo: {
        id: "001",
        name: "张三",
        province: "浙江省",
        city: "杭州市",
        images: require("@/assets/szzq_images/top_img_avatar.png"),
      },
      projectInfo: [
        {
          title: "征收启动公告",
          icon: require("@/assets/szzq_images/card_icon_征收启动公告.png"),
        },
        {
          title: "勘测定界",
          icon: require("@/assets/szzq_images/card_icon_勘测定界.png"),
        },
        {
          title: "张贴回执",
          icon: require("@/assets/szzq_images/card_icon_张贴回执.png"),
        },
        {
          title: "补偿安置方案",
          icon: require("@/assets/szzq_images/card_icon_补偿安置方案.png"),
        },
        {
          title: "补偿安置协议",
          icon: require("@/assets/szzq_images/card_icon_补偿安置协议.png"),
        },
        {
          title: "征收启动公告",
          icon: require("@/assets/szzq_images/card_icon_征收启动公告.png"),
        },
      ],
      policyInfo: [
        { title: "颁布新的政策法规1", link: "" },
        { title: "颁布新的政策法规2", link: "" },
        { title: "颁布新的政策法规3", link: "" },
        { title: "颁布新的政策法规4", link: "" },
      ],
      rankInfo: [
        { city: "杭州", percentage: 40, customColor: "#409eff", link: "" },
        { city: "上海", link: "" },
        { city: "宁波", link: "" },
        { city: "苏州", link: "" },
      ],
      downBtnInfo: [
        { title: "修改密码", icon: "el-icon-lock" },
        { title: "退出登录", icon: "el-icon-switch-button" },
      ],
      myoption: {
        title: {
          text: "征收面积",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
      mybarOption: {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
        },
        grid: {
            left: '3%',
            right: '20%',
            bottom: '3%',
            containLabel: true
        },
        yAxis:  {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        series: [
            {
                name: '直接访问',
                type: 'bar',
                stack: '总量',
                data: [320, 302, 301, 334, 390, 330, 320],
            },
            {
                name: '邮件营销',
                type: 'bar',
                stack: '总量',
                data:  [120, 132, 101, 134, 90, 230, 210],
            },
            {
                name: '联盟广告',
                type: 'bar',
                stack: '总量',
                data:    [220, 182, 191, 234, 290, 330, 310],
            },
            {
                name: '视频广告',
                type: 'bar',
                stack: '总量',
                data: [150, 212, 201, 154, 190, 330, 410],
            },
            {
                name: '搜索引擎',
                type: 'bar',
                stack: '总量',
                data:   [820, 832, 901, 934, 1290, 1330, 1320]
            },
            {
                name: '总计',
                type: 'line',  // 平均值
                data: (function() {
                    let sum = []
                    var data = [

                      [320, 302, 301, 334, 390, 340, 320],
        [120, 132, 101, 134, 90, 230, 210],
        [220, 182, 191, 234, 290, 330, 210],
        [150, 212, 201, 154, 190, 330, 410],
        [820, 832, 901, 934, 1290, 130, 1320]
                    ];
                    for (let i in data) {
                        for (let j in data[i]) {
                            if(!sum[j]){
                                sum[j] = 0
                            }
                            sum[j] += data[i][j]
                        }
                    }
                    return sum
                })(),
                itemStyle: {
                    opacity: 0
                },
                lineStyle: {
                    opacity: 0
                },
                markLine: {
                    data: [
                        {
                            type: 'average',
                            name: '平均水平',
                            label: {
                                normal: {
                                    position: 'end',
                                    formatter: '{b}: {c}'
                                }
                            }
                        }
                    ]
                }
            }
        ]
      },
      myscatter: {
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68],
            ],
            type: "scatter",
          },
        ],
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.page2 {
  z-index: 12;
  position: sticky;
  /* width: 100%; 
   height: 100%; */

  background: #eff5fe;
}
.header {
  display: flex;
  height: 68px;
  padding: 0 30px;
  min-width: 1000px;
  background: url("~@/assets/szzq_images/top_bg.png");
  background-size: cover;
}
.header-title {
  line-height: 68px;
  width: 284px;
  color: #ffffff;
  font-size: 24px;
}
.nav {
  flex: 1;
  line-height: 68px;
}
.username {
  width: 138px;
  line-height: 68px;
  color: #ffffff;
}
/* 导航栏菜单样式 */
.el-menu {
  height: 68px;
  /* 将element-ui导航菜单背景颜色设置为透明色 */
  background-color: transparent;
}

.el-menu--horizontal {
  border-bottom: none;
}
.el-menu--horizontal > .el-menu-item {
  height: 68px;
  line-height: 68px;
  /* 设置菜单文字失活颜色 */
  color: #ffffff;
}
/* 设置悬浮颜色样式--s */
.el-menu--horizontal > .el-menu-item[data-v-b56f2db2]:hover {
  font-size: 20px;
  color: orange;
  background-color: transparent;
}

/* 菜单激活样式设置，important慎用*/
.el-menu-item.is-active {
  color: #ffffff !important;
  background-color: #3370ff !important;
}
.top-imag-avatar {
  display: inline-block;
  margin-right: 8px;
}
.top-imag-avatar img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
/* 用户名称部分 */
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.main-container {
  /* position: absolute; */
  /* display: flex; */
  padding: 16px 20px;
  top: 68px;
  bottom: 0;
  /* width: 100%; */
  min-width: 1000px;
  /* background: green; */
}
/* 标题豆腐块内容样式 */
.title-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.title-item {
  /* flex: 1; */
  width: 208px;
  height: 100px;
  margin: 0 8px;
  border-radius: 8px;
  background: #ffffff;
}
.title-item-img {
  height: 56px;
  width: 56px;
  line-height: 100px;
  margin: 0 10px 16px;
  display: inline-block;
}
.title-item-img img {
  height: 56px;
  width: 56px;
  vertical-align: middle;
}
/* 第一排统计图表样式 */
.chart-part-1,
.chart-part-2 {
  margin: 16px 0;
  background: #eff5fe;
  display: flex;
}
/* 1.项目数量 */
.xmsl-content,
.zfje-content {
  width: 576px;
  height: 280px;
  background: #ffffff;
}
/* 2.征收面积 */
.zsmj-content,
.azrk-content {
  /* width: 392px;
  height: 280px; */
  flex: 1;
  background: #ffffff;
  margin: 0 16px;
}
/* 3、政策法规 */
.zcfg-content,
.qypm-content {
  width: 328px;
  height: 280px;
  background: #ffffff;
}
/* 签约排名样式 */
.rankitem {
  display: flex;
}
.rankitem .jdt {
  /* display: inline-block; */
  flex: 1;
}
</style>